<template>

    <div class="container">
        <Category title="美食" :listData="foods">
            <img slot="center"
                 src="http://5b0988e595225.cdn.sohucs.com/images/20190606/30f1f89cfe5f40bcbb3d5e9f16cc1d2b.jpeg" alt="">
            <a slot="footer" href="https://www.baidu.com">百度1</a>
        </Category>

        <Category title="游戏" :listData="games">
            <ul slot="center">
                <li v-for="(g,index) in games" :key="index">{{g}}</li>
            </ul>
            <div slot="footer" class="foot">
                <a href="https://www.baidu.com">百度2</a>
                <a href="https://www.baidu.com">百度2</a>
            </div>
        </Category>
        <Category title="电影" :listData="films">
            <img slot="center" src="https://inews.gtimg.com/newsapp_bt/0/13769197901/1000" alt="">
            <template slot="footer">
                <div class="foot">
                    <a href="https://www.baidu.com">百度3</a>
                    <a href="https://www.baidu.com">百度3</a>
                    <a href="https://www.baidu.com">百度3</a>
                </div>
                <h4 slot="footer">欢迎前来观影</h4>
            </template>

        </Category>

    </div>


</template>

<!--组件交互相关的代码-->
<script>
    import Category from './components/Category'

    export default {
        name: 'App',
        components: {
            Category
        },
        data() {
            return {
                foods: ['火锅', '烧烤', '小龙虾', '牛排'],
                games: ['超级玛丽', '王者荣耀', '穿越火线', '刺激战场'],
                films: ['《教父》', '《拆弹专家》', '《尚硅谷》', '《变形金刚》']
            }
        }
    }

</script>
<style>
    .container, .foot {
        display: flex;
        justify-content: space-around;
    }

    h4 {
        text-align: center;
    }

</style>




